<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="17">
        <sz-panel label="待办中心">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              :label="item.shortName ? item.shortName : item.name"
              :name="item.id"
              v-for="(item, index) in shortList"
              :key="index"
            >
            </el-tab-pane>
          </el-tabs>
          <el-table
            :show-header="false"
            style="width: 100%;padding:0px 10px 10px 10px;height: 291px;cursor: pointer"
            stripe
            :data="pageData"
            @row-click="openDetails"
          >
            <el-table-column show-overflow-tooltip prop="title">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 'BACK'" style="color: red;"
                  >【退回】</span
                >
                <span
                  v-if="scope.row.priority === 'SPECIAL_URGENT'"
                  style="color: red;"
                  >【特急】</span
                >
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column width="200" show-overflow-tooltip prop="flowName">
              <template slot-scope="scope">
                <span style="color:#999999">{{ scope.row.flowName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              show-overflow-tooltip
              prop="receiverName"
            >
              <template slot-scope="scope">
                <span style="color:#999999">{{ scope.row.senderName }}</span>
              </template>
            </el-table-column>
            <el-table-column width="170" show-overflow-tooltip prop="sendTime">
              <template slot-scope="scope">
                <span style="color:#999999">{{
                  scope.row.sendTime | formatTime("yyyy-MM-dd hh:mm")
                }}</span>
              </template>
            </el-table-column>
            <div slot="empty" class="empty">
              <div style="position: relative;height:200px">
                <img
                  style="margin-top:10%;margin-bottom: 0;padding-bottom: 0;opacity: 0.5"
                  src="@/assets/empty.png"
                />
                <span
                  style="margin: 0;display: block;position:absolute;top:140px;left:46%"
                  >暂无数据</span
                >
              </div>
            </div>
          </el-table>
        </sz-panel>
      </el-col>
      <el-col :span="7">
        <sz-panel label="常用审批">
          <div class="cooper" style="overflow:hidden">
            <div
              id="buttonD"
              style="float: left; display: flex;justify-content: space-between;margin:10px 5px 0 10px; "
              v-for="(item, index) in buttons"
              v-show="index < 5"
              :key="index"
            >
              <div
                style=" display: inline-block;text-align:center;vertical-align: top;margin:10px;"
              >
                <el-button
                  id="buttons"
                  circle
                  :icon="item.icon"
                  :style="setButtonStyle(item)"
                  @click="goWaitTaskPage(item)"
                ></el-button>
                <p style="font-size: 14px">{{ item.name }}</p>
              </div>
            </div>
          </div>
        </sz-panel>
        <sz-panel label="流程提醒" style="margin-top: 10px;">
          <div class="msg_tip">
            <el-row :gutter="10">
              <el-col :span="8">
                <box-border class="border_item">
                  <div>
                    <p style="font-size: 16px;color: #333333;">流程超时</p>
                    <span style="font-size: 14px; color: #999999;"
                      >您有{{ taskPrompt.deferCount }}个流程超时</span
                    >
                  </div>
                </box-border>
              </el-col>
              <el-col :span="8">
                <box-border class="border_item">
                  <div>
                    <p style="font-size: 16px;color: #333333;">
                      流程待办
                    </p>
                    <span style="font-size: 14px; color: #999999;"
                      >您有{{ taskPrompt.waitCount }}个流程待办</span
                    >
                  </div>
                </box-border>
              </el-col>
              <el-col :span="8">
                <box-border class="border_item">
                  <div>
                    <p style="font-size: 16px;color: #333333;">流程督办</p>
                    <span style="font-size: 14px; color: #999999;"
                      >您有{{ taskPrompt.superviseCount }}个流程督办</span
                    >
                  </div>
                </box-border>
              </el-col>
            </el-row>
          </div>
        </sz-panel>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  name: "flowHomeTop",
  created() {
    this.getPageData();
    this.getButtons();
    this.getWorkflowShort();
    this.getTaskTipCount();
  },
  data() {
    return {
      pageData: [], // 待办数据
      activeName: "-1",
      searchDto: {
        count: 6,
        flowId: "",
        status: "0"
      },
      buttons: [], // 常用工具
      shortList: [], // 工作流简称
      taskPrompt: {} // 任务提示数量，超时，待办，督办
    };
  },
  computed: {
    ...mapGetters({})
  },
  methods: {
    // 获取任务提示数量
    getTaskTipCount() {
      this.API.getMyWorkflowTaskPrompt().then(res => {
        this.taskPrompt = res.data;
      });
    },
    // 获取工作流简称
    getWorkflowShort() {
      this.API.getAllWorkflowShortList().then(res => {
        this.shortList = res.data;
        this.shortList.unshift({ id: "-1", shortName: "全部" });
      });
    },
    getPageData() {
      this.API.getAllWorkflowTaskTopList(this.searchDto).then(res => {
        this.pageData = res.data;
      });
    },
    // 获取常用工具
    getButtons() {
      // this.API.getCommonToolList({ position: "WORKFLOW_HOME" }).then(res => {
      //   this.buttons = res.data.filter(item => item.status !== false);
      // });
    },
    // 设置button
    setButtonStyle(button) {
      let style =
        " width: " +
        button.outSize +
        "px;\n" +
        "    height:" +
        button.outSize +
        "px;\n" +
        "    border-radius: " +
        button.outSize +
        "px;\n" +
        "    color: white;\n" +
        "    background-color:" +
        button.bgColor +
        ";\n" +
        "    font-size: " +
        button.iconSize +
        "px;";
      return style;
    },
    openDetails(row) {
      let routeData = this.$router.resolve({
        path: "/workflow/apply",
        query: { flowId: row.flowId, taskId: row.id }
      });
      this.openPage(routeData.href, "wait");
    },
    // 跳转到待办列表页面
    goWaitTaskPage(item) {
      if (item.openType === "LABEL") {
        this.$router.push(JSON.parse(item.route));
      } else {
        let routeData = this.$router.resolve(JSON.parse(item.route));
        this.openPage(routeData.href, "wait");
      }
    },
    handleClick(tab, event) {
      switch (tab.paneName) {
        case "-1":
          this.searchDto.flowId = "";
          break;
        default:
          this.searchDto.flowId = tab.paneName;
          break;
      }
      this.getPageData();
    }
  }
};
</script>
<style scoped lang="less">
.person_badge {
  /deep/ .el-badge__content.is-fixed {
    top: 5px !important;
  }
}
.cooper {
  height: 137px;
  margin: 0 auto;
  background-color: white;
}
.msg_tip {
  margin: 0px 10px;
  height: 152px;
  background-color: white;
  .border_item {
    margin-top: 32px;
    width: 100%;
    box-shadow: 0px 3px 20px rgba(0, 117, 255, 0.06);
    -webkit-box-shadow: 0px 3px 20px rgba(0, 117, 255, 0.06);
    padding-bottom: 10px;
    padding-left: 10px;
    border-radius: 4px;
  }
}

.container {
  height: 415px;
  display: flex;
  float: left;
  width: 100%;
}

.side {
  width: 100%;
  background-color: white;
}

.content {
  flex: 1;
  margin-left: 10px;
  box-sizing: border-box;
  background-color: white;
}
.btn_item {
  width: 60px;
  height: 60px;
  border-radius: 50px;
  color: white;
  font-size: 20px;
}
.border {
  padding: 17px 0 17px 20px;
  border-bottom: 1px solid rgba(224, 238, 249, 1);
}
/deep/ .el-tabs__item {
  font-size: 16px;
  margin: 5px 0;
}
/deep/ .el-table td,
.el-table th.is-leaf {
  border-bottom: 0;
}
/deep/.el-tabs__nav {
  margin-left: 10px;
}
@media screen and (max-width: 1700px) {
  .cooper #buttons > {
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
  }
  .cooper #buttonD div {
    margin: 15px 5px !important;
  }
  .cooper #buttonD div p {
    font-size: 13px !important;
  }
}
@media screen and (max-width: 1600px) {
  .cooper #buttons > {
    width: 50px !important;
    height: 50px !important;
    font-size: 23px !important;
  }
  .cooper #buttonD div {
    margin: 16px 5px !important;
  }
  .cooper #buttonD div p {
    font-size: 12px !important;
  }
}
@media screen and (max-width: 1560px) {
  .cooper #buttons > {
    width: 47px !important;
    height: 47px !important;
    font-size: 22px !important;
  }
  .cooper #buttonD div {
    margin: 16px 4px !important;
  }
  .cooper #buttonD div p {
    font-size: 11px !important;
  }
}
@media screen and (max-width: 1520px) {
  .cooper #buttons > {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
  }
  .cooper #buttonD div {
    margin: 20px 3px !important;
  }
  .cooper #buttonD div p {
    font-size: 10px !important;
  }
}
@media screen and (max-width: 1480px) {
  .cooper #buttons > {
    width: 45px !important;
    height: 45px !important;
    font-size: 19px !important;
  }
  .cooper #buttonD div {
    margin: 20px 2px !important;
  }
  .cooper #buttonD div p {
    font-size: 10px !important;
  }
}
@media screen and (max-width: 1450px) {
  .cooper #buttons > {
    width: 43px !important;
    height: 43px !important;
    font-size: 18px !important;
  }
  .cooper #buttonD div {
    margin: 20px 2px !important;
  }
  .cooper #buttonD div p {
    font-size: 10px !important;
  }
}
@media screen and (max-width: 1420px) {
  .cooper #buttons > {
    width: 41px !important;
    height: 41px !important;
    font-size: 16px !important;
  }
  .cooper #buttonD div {
    margin: 0 2px !important;
  }
  .cooper #buttonD div p {
    font-size: 10px !important;
    margin: 1px !important;
  }
}
</style>
